<template></template>
<script>
export default {
    methods: {
        preview(file) {
	        let title = `${file.name}预览`, content
            const type = file._type || file.type
            if (!file.name) file.name = url.substring(url.lastIndexOf('/') + 1)
            if (['wxs', 'link'].includes(type)) {
	        	if (type === 'wxs') {
	        		content = `
	        			<div class="wxs-link">
	        				<div><span>小程序消息标题：</span><span>${file.title}</span></div>
	        				<div><span>小程序AppID：</span><span>${file.appid}</span></div>
	        				<div><span>小程序页面路径：</span><span>${file.page}</span></div>
	        				<div><span>小程序封面图：</span><span><img src='${file.cover[0].url}' /></span></div>
	        			</div>
	        		`
	        	} else {
	        		content = `
	        			<div class="wxs-link">
	        				<div><span>链接标题：</span><span>${file.title}</span></div>
	        				<div><span>链接的描述：</span><span>${file.desc}</span></div>
	        				<div><span>链接URL：</span><span><a href="${file.page}" target="_blank">${file.page}</a></span></div>
	        				<div><span>链接封面图：</span><span><img src='${file.cover[0].url}' /></span></div>
	        			</div>
	        		`
	        	}
	        } else {
                const url = file.url ? file.url : window.URL.createObjectURL(file.raw || file)
                if (type === 'image') {
                    if (!file) {
                        return this.$message.error('图片不存在')
                    }
                    title = `图片预览 (${file.name})`
                    content = `<img class="pic-preview" src='${url}' />`
                } else if (type === 'video') {
                    title = `视频预览 (${file.name})`
                    content = `
                        <video class="video-preview" width="320" height="240" controls>
                            <source src="${url}" type="video/mp4">
                            您的浏览器不支持Video标签。
                        </video>
                    `
                } else if (type === 'audio') {
                    title = `语音试听 (${file.name})`
                    content = `<audio class="audio-preview" src="${fileUrl}" controls="controls"></audio>`
                } else if (type === 'file') {
                    if (!file.suffix) {
                        file.suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
                    }
                    if (file.suffix.toUpperCase() === 'PDF') {
                        return window.open(url)
                    }
                    return window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url))
                }
            }
            this.$alert(
                content,
                title, 
                { 
                    dangerouslyUseHTMLString: true,
                    showConfirmButton: false,
                    customClass: 'upload-file__preview',
                    beforeClose: function(action, instance, done) {
                        done()
                        if (['video', 'audio'].includes(type)) {
                            const media = document.querySelector(`.upload-file__preview ${type}`)
                            media && media.pause()
                        }
                    }
                }
            ).catch(() => {})
        }
    }
}
</script>
<style lang="scss">
/* file privew */
.upload-file__preview {
    width: 96%;
    height: auto;
	max-width: 640px;
    min-height: 100px;
    max-height: calc(80vh);
    .el-message-box__title {
        width: calc(100% - 80px);
        word-wrap: break-all;
        word-break:break-all;
        white-space: pre-line;
        line-height: 1.4;
    }
    .el-message-box__content {
        max-height: calc(80vh - 80px);
        padding-bottom: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
    .el-message-box__container {
        width: 100%;
        overflow-y: auto;
        &::-webkit-scrollbar { 
            width: 8px;
            height: 8px;
        }
        &::-webkit-scrollbar-thumb {
            cursor: pointer;
            background-color: rgba(144, 147, 153, 0.25);
            background-clip: padding-box;
            border-right: 1px solid transparent;
            border-bottom: 1px solid transparent;
            border-radius: 6px;
        }
    }
    .el-message-box__message {
        flex: 1;
        p {
            height: 100%;
            text-align: center;
        }
    }
    .wxs-link {
    	width: 100%;
    	border: 1px solid #EBEEF5;
        div {
	        width: 100%;
	        display: flex;
	        justify-content: flex-start;
	        flex-wrap: wrap;
	        overflow: hidden;
	        /* margin: 0 0 10px; */
	        border-bottom: 1px solid #EBEEF5;
	        border-radius: 3px;
            &:last-child {
	            border: none;
            }
            span {
	            line-height: 1.4;
	            padding: 10px 15px;
	            box-sizing: border-box;
                &:first-child {
                	padding-right: 0;
                	width: 136px;
                	text-align: right;
                	background-color: #f6f6f6;
                	border-right: 1px solid #EBEEF5;
                }
                &:last-child {
                	flex-grow: 1;
                	text-align: left;
                	overflow: hidden;
                	width: calc(100% - 136px);
                	padding-left: 16px;
                	padding-right: 16px;
                	box-sizing: border-box;
                	color: #999;
                }
            }
            img {
            	margin: 3px 0 0;
            	width: 100%;
            }
        }
    }
    .pic-preview {
    	max-width: 100%;
        max-height: 100%;
    }
    .video-preview {
    	width: 100%;
        min-height: 300px;
    	max-height: 460px;
    	object-fit: fill;
    }
    .audio-preview {
    	width: 100%;
    }
}
</style>